<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav">
			<view class="r-name">师傅</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="cate p-32 dispaly-just-between f" :style="{marginTop: navHeiht+ 'px'}">
			<view class="cate-box f-2 dispaly-just-between">
				<view class="cate-item" @click="clickItem(item, index)" v-for="(item, index) in cateList" :key="index">
					<view :class="{'ac': current == index}" class="cate-name  p-t-10" v-if="item.type == 1">
						{{item.name}}
					</view>
					<view class="cate-type" v-if="item.type == 2 ">
						<view class="dispaly-center">
							<view class="cate-name p-t-10" :class="{'ac': current == index}">{{item.name}}</view>
							<view class="cate-icon dispaly-col-center">
								<u-icon style="height: 18rpx;" name="arrow-up-fill"
									:color="sortCurrent == 0 ? '#020121': '#D8D8D8'" size="15"></u-icon>
								<u-icon name="arrow-down-fill" :color="sortCurrent == 0 ? '#D8D8D8': '#020121'"
									size="15"></u-icon>
							</view>
						</view>
					</view>
					<view class="cate-type" v-if=" item.type == 3">
						<view class="dispaly-center">
							<view class="cate-name p-t-10" :class="{'ac': current == index}">{{item.name}}</view>
							<view class="cate-icon dispaly-col-center">
								<u-icon style="height: 18rpx;" name="arrow-up-fill"
									:color="sortCurrentTwo == 0 ? '#020121': '#D8D8D8'" size="15"></u-icon>
								<u-icon name="arrow-down-fill" :color="sortCurrentTwo == 0 ? '#D8D8D8': '#020121'"
									size="15"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="search-box f-1  p-t-10">
				<u-search :clearabled="false" bg-color="#F4F6F8" :show-action="false" v-model="keyword" class="w-100"
					height="70" placeholder="搜索师傅"></u-search>
			</view>
		</view>
		<view class="content p-32">
			<view :style="{marginTop: cateHeight + 'px'}">
				<TeacherCard />
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight
	} from '@/utils/util'
	import TeacherCard from '@/compoment/card/teacherCard.vue'

	const cateList = ref([{
			name: '综合',
			type: 1,
			sort: 'sort'
		},
		{
			name: '接单量',
			type: 2,
			sort: 'create_time'
		},
		{
			name: '级别',
			type: 3,
			sort: ''
		},
	])

	// 点击分类
	const current = ref(0)
	const sortCurrent = ref(0)
	const sortCurrentTwo = ref(0)
	const clickItem = (item, index) => {
		current.value = index
		if (item.type == 2) {
			if (sortCurrent.value == 0) {
				sortCurrent.value = 1
			} else {
				sortCurrent.value = 0
			}
		}
		if (item.type == 3) {
			if (sortCurrentTwo.value == 0) {
				sortCurrentTwo.value = 1
			} else {
				sortCurrentTwo.value = 0
			}
		}
	}

	// 搜索
	const keyword = ref('')

	// 获取元素高度
	const navHeiht = ref(0)
	const cateHeight = ref(0)
	onMounted(async () => {
		const res = await getElementHeight('.f')
		navHeiht.value = res
		const cateRes = await getElementHeight('.cate')
		cateHeight.value = cateRes
	})
</script>

<style lang="scss" scoped>
	.home-content {
		margin: 0 32rpx;
	}

	.ac {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 900 !important;
		font-size: 28rpx !important;
		color: #020121 !important;
	}

	.r-name {
		color: #020121;
	}

	.common {
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}


	.content {}

	.cate {
		background-color: #fff;

		.cate-box {
			.cate-item {
				.cate-name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #7B7B89;
					padding-right: 5rpx;
				}
			}
		}

		.search-box {
			margin-left: 60rpx;
		}
	}
</style>